<template>
  <el-config-provider>
    <div class="app-container">
      <el-container v-if="userStore.token">
        <el-header height="60px">
          <div class="header-container">
            <h1 class="app-title">商城管理系统</h1>
            <div class="nav-menu">
              <el-menu
                mode="horizontal"
                :router="true"
                :ellipsis="false"
                :default-active="activeRoute"
              >
                <el-menu-item index="/">
                  <el-icon><Grid /></el-icon>
                  <span>商品管理</span>
                </el-menu-item>
                <el-menu-item index="/email">
                  <el-icon><Message /></el-icon>
                  <span>邮件发送</span>
                </el-menu-item>
              </el-menu>
            </div>
            <div class="user-info">
              <el-avatar :size="32">
                <User />
              </el-avatar>
              <span class="username">{{ userStore.username }}</span>
              <el-button type="text" @click="handleLogout">退出</el-button>
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
        <el-footer height="40px">
          <div class="footer-content">&copy; {{ new Date().getFullYear() }} 商城管理系统</div>
        </el-footer>
      </el-container>

      <router-view v-else />
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User, Grid, Message } from '@element-plus/icons-vue'
import { logout } from '@/api/auth'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

const activeRoute = computed(() => route.path)

const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        await logout()
      } catch (error) {
        console.error('登出请求失败:', error)
      } finally {
        userStore.logout()
        router.push('/login')
        ElMessage.success('已退出登录')
      }
    })
    .catch(() => {})
}
</script>

<style scoped>
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  border-bottom: 1px solid #dcdfe6;
  padding: 0 20px;
}

.app-title {
  font-size: 20px;
  margin: 0;
  color: #409eff;
  margin-right: 30px;
}

.nav-menu {
  flex-grow: 1;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 20px;
}

.username {
  font-weight: 500;
}

.el-header {
  background-color: #fff;
  color: #333;
  line-height: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 10;
  padding: 0;
}

.el-main {
  background-color: #f5f7fa;
  color: #333;
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
}

.el-footer {
  background-color: #fff;
  border-top: 1px solid #eee;
  color: #909399;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-content {
  font-size: 14px;
}
</style>
